<template>
    <!-- 雷达图 -->
    <div class="app-container">
        <el-row :gutter="30" :style="{height: '800px', width: '100%'}">
            <div class="chart" ref="chart" :style="{height:'100%',width:'100%'}"></div>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/map/js/china.js') //echarts map
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'

export default {
    name: 'ChartMap',
    mixins: [resize],
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs['chart'], 'macarons')
            this.setOptions(this.chartData)
        },
        setOptions() {
            this.chart.setOption({
                title: {
                    text: '手机销量',
                    subtext: '纯属虚构',
                    right: 'center'
                },
                tooltip: {
                    trigger: 'item', //触发类型,默认数据触发，可选为:'item' | 'axis'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['iphone9', 'iphone10', 'iphone11']
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'bottom',
                    feature: {
                        mark: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: true
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                dataRange: {
                    min: 0,
                    max: 2500,
                    left: 'left',
                    top: 'bottom',
                    text: ['高', '低'],
                    calculable: true
                },
                series: [
                    {
                        name: 'iphone9',
                        type: 'map',
                        mapType: 'china', //地图类型，支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文，如： 上海，北京
                        roam: false, //是否开启滚轮缩放和拖拽漫游，默认为false（关闭），其他有效输入为true(开启)。'scale'(仅开启滚轮缩放) 'move'(仅开启拖拽漫游)
                        mapValueCalculation: 'sum', //地图数值计算方式。默认为加和。可选为：'sum(总数)' | 'average(均值)'
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        data: [
                            {
                                name: '北京',
                                value: 234
                            },
                            {
                                name: '天津',
                                value: 532
                            },
                            {
                                name: '上海',
                                value: 134
                            },
                            {
                                name: '重庆',
                                value: 983
                            },
                            {
                                name: '河北',
                                value: 783
                            },
                            {
                                name: '安徽',
                                value: 767
                            },
                            {
                                name: '山东',
                                value: 675
                            },
                            {
                                name: '新疆',
                                value: 874
                            },
                            {
                                name: '江苏',
                                value: 874
                            },
                            {
                                name: '浙江',
                                value: 928
                            },
                            {
                                name: '江西',
                                value: 928
                            },
                            {
                                name: '湖北',
                                value: 44
                            },
                            {
                                name: '广西',
                                value: 448
                            },
                            {
                                name: '甘肃',
                                value: 887
                            },
                            {
                                name: '山西',
                                value: 99
                            }
                        ]
                    },
                    {
                        name: 'iphone10',
                        type: 'map',
                        mapType: 'china', //地图类型，支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文，如： 上海，北京
                        roam: false, //是否开启滚轮缩放和拖拽漫游，默认为false（关闭），其他有效输入为true(开启)。'scale'(仅开启滚轮缩放) 'move'(仅开启拖拽漫游)
                        mapValueCalculation: 'sum', //地图数值计算方式。默认为加和。可选为：'sum(总数)' | 'average(均值)'
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        data: [
                            {
                                name: '北京',
                                value: 234
                            },
                            {
                                name: '天津',
                                value: 532
                            },
                            {
                                name: '上海',
                                value: 134
                            },
                            {
                                name: '重庆',
                                value: 983
                            },
                            {
                                name: '河北',
                                value: 783
                            },
                            {
                                name: '安徽',
                                value: 767
                            },
                            {
                                name: '山东',
                                value: 675
                            },
                            {
                                name: '新疆',
                                value: 874
                            },
                            {
                                name: '江苏',
                                value: 874
                            },
                            {
                                name: '浙江',
                                value: 928
                            },
                            {
                                name: '江西',
                                value: 928
                            },
                            {
                                name: '湖北',
                                value: 44
                            },
                            {
                                name: '广西',
                                value: 448
                            },
                            {
                                name: '甘肃',
                                value: 887
                            },
                            {
                                name: '山西',
                                value: 99
                            }
                        ]
                    },
                    {
                        name: 'iphone11',
                        type: 'map',
                        mapType: 'china', //地图类型，支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文，如： 上海，北京
                        roam: false, //是否开启滚轮缩放和拖拽漫游，默认为false（关闭），其他有效输入为true(开启)。'scale'(仅开启滚轮缩放) 'move'(仅开启拖拽漫游)
                        mapValueCalculation: 'sum', //地图数值计算方式。默认为加和。可选为：'sum(总数)' | 'average(均值)'
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        data: [
                            {
                                name: '北京',
                                value: 234
                            },
                            {
                                name: '天津',
                                value: 532
                            },
                            {
                                name: '上海',
                                value: 134
                            },
                            {
                                name: '重庆',
                                value: 983
                            },
                            {
                                name: '河北',
                                value: 783
                            },
                            {
                                name: '安徽',
                                value: 767
                            },
                            {
                                name: '山东',
                                value: 675
                            },
                            {
                                name: '新疆',
                                value: 874
                            },
                            {
                                name: '江苏',
                                value: 874
                            },
                            {
                                name: '浙江',
                                value: 928
                            },
                            {
                                name: '江西',
                                value: 928
                            },
                            {
                                name: '湖北',
                                value: 44
                            },
                            {
                                name: '广西',
                                value: 448
                            },
                            {
                                name: '甘肃',
                                value: 887
                            },
                            {
                                name: '山西',
                                value: 99
                            }
                        ]
                    }
                    
                ]
            });
        }
    }
}
</script>